<template>
    
  <div>
    <h1>登录页面</h1>
    <button @click="AddNum">Number++:{{ count }}</button>
  </div>
 
</template>

<!-- 方式一:选项式API -->
 <!-- <script> 

// 引入vue   选择式引入  data methods mounted    
export default {
  data() {
    return {
      // 声明参数count,初始化赋值为0
      count: 0,
    };
  },
  methods: {
    // 声明方法AddNum 实现自增操作
    AddNum() {
      this.count++;
    },
  },
  mounted() {
    // mounted生命周期函数，页面一加载就执行
    console.log(this.count);
  },
};

</script> -->


<!-- // 方式二:组合式API -->
<script setup lang="ts">
import { ref,onMounted } from "vue";

/* // 声明参数count,初始化赋值为0 */
const count = ref(0);

// 声明方法AddNum 实现自增操作
const AddNum = () => {
  count.value++;
};

// mounted生命周期函数，页面一加载就执行
onMounted(() => {
  // alert(count.value);
})
</script>

<style scoped>
</style>